<!--@author vidy3587@gmail.com-->
<template>
  <div class="modal-container">
    <transition name="fade">
      <div v-show="show">
        <div class="modal-backdrop" @click="backDropClick()">
        </div>
        <div class="modal">
          <div class="modal-content">
            <div v-if="loading" class="modal-loading flex horizontal-middle vertical-middle">
              <van-loading  type="spinner"/>
            </div>
            <slot></slot>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
/**
 * @example <Modal v-model="showModal"><Modal>
 */
export default {
  name: "Modal",
  model: {
    prop: 'show',
    event: 'change',
  },
  props: {
    show: Boolean,
    loading: Boolean
  },
  methods: {
    backDropClick() {
      this.$emit('change', false);
    }
  }
}
</script>

<style scoped lang="scss">
$modalZIndex: 9999;
.modal-container {
  position: fixed;
  z-index: $modalZIndex;
}
.modal-content {

}
.modal-backdrop {
  position: fixed;
  //width: 100vw;
  //height: 100vh;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  //backdrop-filter:  blur(3px);
  overflow: hidden;
}

.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate3d(px2rem(-(510px/2)), px2rem(-(454px/2)), 0);
  background: $short_video_main_color;
  border-radius: px2rem(20px);
  width: px2rem(510px);
  height: px2rem(454px);
  z-index: $modalZIndex + 1;

}


.modal-loading {
  //width: 100%;
  //height:100%;
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
</style>